<template>
  <div class="home">
    <!-- 筛选 -->
    <div class="search_content">
      <van-nav-bar :title="$route.meta.title" left-text="返回" left-arrow @click-left="goBack()" />
      <form action>
        <van-search v-model="requestParams.phoneOrCustomerName" placeholder="请输入手机号码或客户姓名" shape="round" @search="initData" />
      </form>
      <div class="search_item">
        <van-dropdown-menu :close-on-click-outside="false">
          <van-dropdown-item title="品牌展厅" ref="brandRef">
            <div class="searchbox timebox">
              <van-field v-model="requestParams.brandName" name="品牌" label="品牌" placeholder="请选择" input-align="right" right-icon="arrow" @click="handleSelect('brandId', 'brandName')" readonly />
              <van-field v-model="requestParams.showOrgName" name="展厅" label="展厅" input-align="right" placeholder="请选择" right-icon="arrow" @click="handleSelect('showOrgId', 'showOrgName')" readonly />
              <div class="insureBtn">
                <van-button size="small" type="warning" class="resetBtn" @click="handleBrandReset()">重置</van-button>
                <van-button size="small" type="info" class="confirmBtn" @click="onConfirm('brandRef')">确认</van-button>
              </div>
            </div>
          </van-dropdown-item>

          <van-dropdown-item title="客户级别" ref="levelRef">
            <div class="searchbox">
              <div class="level">
                <div class="title">最新客户级别</div>
                <div class="insureList">
                  <div class="insure_item" :class="index == currentNewLevel ? 'active' : ''" v-for="(item, index) in cusLevelList" :key="index" @click="
                      handleIsSelect(index, 'currentNewLevel', 'cusLevelList', 'newCustomerLevel')
                    ">{{ item.name }}</div>
                </div>
              </div>
              <div class="level">
                <div class="title">初始客户级别</div>
                <div class="insureList">
                  <div class="insure_item" :class="index == currentOriginalLevel ? 'active' : ''" v-for="(item, index) in cusLevelList" :key="index" @click="
                      handleIsSelect(index, 'currentOriginalLevel', 'cusLevelList', 'initCustomerLevel')
                    ">{{ item.name }}</div>
                </div>
              </div>

              <div class="insureBtn">
                <van-button size="small" type="warning" class="resetBtn" @click="handleLevelReset()">重置</van-button>
                <van-button size="small" type="info" class="confirmBtn" @click="onConfirm('levelRef')">确认</van-button>
              </div>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
        <!-- 服务顾问下拉 -->
        <van-popup v-model="showSelectPicker" position="bottom">
          <van-picker show-toolbar :columns="columns" @confirm="handleSelectConfirm" @cancel="showSelectPicker = false" value-key="name" />
        </van-popup>
      </div>
    </div>

    <!-- 列表 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadData" v-if="recordList && recordList.length != 0">
        <div class="list-container">
          <div class="item" v-for="item in recordList" :key="item.billId" @click="goDetail(item)">
            <div class="title">
              <h3 class="customName">{{ item.customerName }}</h3>
              <img :src="require(item.sex === '男' ? '@/assets/images/icon_male.png' : '@/assets/images/icon_female.png')" alt />
            </div>

            <div class="row">
              <span class="row-title">所属展厅：</span>
              <span class="row-value">{{ item.showOrgName }}</span>
            </div>
            <div class="row">
              <span class="row-title">销售顾问：</span>
              <span class="row-value">{{ item.empName }}</span>
            </div>
            <div class="row">
              <span class="row-title">联系电话：</span>
              <span class="row-value">{{ item.mobile1 }}</span>
            </div>
            <div class="row">
              <span class="row-title">来源渠道：</span>
              <span class="row-value">{{ item.sourceChannel }}</span>
            </div>
            <div class="row">
              <span class="row-title">最新级别：</span>
              <span class="row-value">{{ item.cusLevel }}</span>
            </div>
          </div>
        </div>
      </van-list>
      <van-empty class="noContent" description="暂无数据" v-else />
    </van-pull-refresh>

    <div class="addBtn">
      <div class="footerBtn orderItem_filebox" @click="goAdd">+ 新增客户</div>
    </div>
  </div>
</template>

<script>
import { Search, DropdownMenu, DropdownItem, Empty } from "vant";
import sellManageApi from "@/api/sellManageApi";

const { secondHandCarFacade, getEnums } = sellManageApi;

export default {
  name: "customList",
  components: {
    Search,
    DropdownMenu,
    DropdownItem,
    Empty
  },
  data() {
    return {
      value: "",
      currentNewLevel: null,
      currentOriginalLevel: null,
      recordList: [],
      recordList1: [
        {
          billId: "1", //单据ID
          customerName: "客户名称", //客户名称
          showOrgName: "展厅", // 所属展厅
          mobile1: "13300136001", // 联系电话
          empName: "销售顾问", // 销售顾问
          sourceChannel: "来源渠道", // 来源渠道
          cusLevel: "最新级别", // 最新级别
          sex: 2 // 性别
        },
        {
          billId: "2", //单据ID
          customerName: "客户名称", //客户名称
          showOrgName: "展厅", // 所属展厅
          mobile1: "13300136001", // 联系电话
          empName: "销售顾问", // 销售顾问
          sourceChannel: "来源渠道", // 来源渠道
          cusLevel: "最新级别", // 最新级别
          sex: 1 // 性别
        },
        {
          billId: "3", //单据ID
          customerName: "客户名称", //客户名称
          showOrgName: "展厅", // 所属展厅
          mobile1: "13300136001", // 联系电话
          empName: "销售顾问", // 销售顾问
          sourceChannel: "来源渠道", // 来源渠道
          cusLevel: "最新级别", // 最新级别
          sex: 2 // 性别
        }
      ],
      columns: [],
      showSelectPicker: false,
      requestParams: {
        method: "getCustomerList",
        pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        // userId: getCookies('userId'), //用户ID，必填，String
        brandId: "",
        brandName: "", // 展示选中品牌
        showOrgId: "",
        showOrgName: "", // 展示选中展厅
        phoneOrCustomerName: "", // 保存搜索值
        newCustomerLevel: "", // 最新客户级别选中项
        initCustomerLevel: "" // 原始客户级别选中项
      },
      // 分页参数
      loading: false,
      finished: false,
      refreshing: false,
      field: "", // 当前下拉选中项的value参数名，用于后端请求传参
      fieldName: "", // 当前下拉选中项的文字参数名，用于输入框展示
      brandList: [], // 品牌下拉选项列表
      showOrgList: [], // 展厅下拉选项列表
      cusLevelList: [] // 展厅下拉选项列表
    };
  },

  async mounted() {
    const reload = this.$route.query.reload;
    if (!(reload && reload === "1")) {
      this.initData();
    }
  },
  activated() {
    const reload = this.$route.query.reload;
    console.log("activated:", this.$route);
    if (reload && reload === "1") {
      this.initData();
    }
  },

  methods: {
    goBack() {
      this.$router.push({
        path: "/"
      });
    },
    // 获取客户级别
    async getLevelList() {
      const res = await getEnums({
        key: "custLevelEnum" //固定值
      });
      this.cusLevelList = res.data;
    },
    // 是否数据选择
    handleIsSelect(index, key, list, field) {
      console.log("list:", this[list], field);
      this[key] = index;
      this.requestParams[field] = this[list][index].value;
      console.log("request:", this.requestParams);
      // this.$forceUpdate()
    },
    // 选择下拉
    handleSelect(field, fieldName) {
      this.showSelectPicker = true;
      if (field == "showOrgId") {
        this.columns = this.showOrgList;
      } else if (field == "brandId") {
        this.columns = this.brandList;
      }
      this.field = field;
      this.fieldName = fieldName;
    },
    // 获取品牌
    getBrandByUser() {
      secondHandCarFacade({
        userId: this.userId,
        orgKey: "brandAll", // orgkey
        method: "getShowOrgByUser"
      }).then(res => {
        if (res.data) {
          this.brandList = res.data;
        }
      });
    },
    // 获取展厅
    getShowOrgByUser() {
      secondHandCarFacade({
        userId: this.userId,
        method: "getShowOrgByBandId",
        brandId: this.requestParams.brandId
      }).then(res => {
        if (res.data) {
          this.showOrgList = res.data;
        }
      });
    },

    // 选择下拉确认
    handleSelectConfirm(value, index) {
      console.log("value:", value);
      console.log("value:", this.field);
      this.requestParams[this.field] = value.billId;
      this.requestParams[this.fieldName] = value.name;
      if (this.field == "brandId") {
        this.getShowOrgByUser();
        this.requestParams.showOrgId = "";
        this.requestParams.showOrgName = "";
      }

      this.showSelectPicker = false;
    },
    // 初始化列表
    initData() {
      this.requestParams.pageNo = 1;
      // this.recordList = []
      this.loadData();
    },
    // 获取列表
    loadData() {
      console.log("loadData");
      console.log("this.loading：", this.loading);
      // delete this.requestParams.brandName
      // delete this.requestParams.showOrgName
      secondHandCarFacade({ ...this.requestParams }).then(res => {
        console.log("loadData", res);
        // debugger
        if (!this.recordList || this.recordList.length < 1) {
          this.getBrandByUser();
          this.getLevelList();
        }

        if (res.code !== 1) {
          this.$toast.fail(res.msg);
        } else {
          if (this.requestParams.pageNo == 1) {
            this.recordList = res.data || [];
          } else {
            this.recordList = this.recordList.concat(res.data || []);
          }
          this.requestParams.pageNo += 1;
        }

        if (!res.data || res.data.length < 10) {
          this.finished = true;
        }
        this.loading = false;
        this.refreshing = false;
      });
    },
    // 下拉刷新
    onRefresh() {
      // 清空列表数据
      // this.recordList = []
      this.finished = false;
      // 重新加载数据
      this.initData();
    },
    // 过滤条件确认
    onConfirm(ref) {
      this.$refs[ref].toggle();
      this.initData();
    },
    // 品牌展厅重置
    handleBrandReset() {
      this.requestParams.brandId = "";
      this.requestParams.brandName = "";
      this.requestParams.showOrgId = "";
      this.requestParams.showOrgName = "";
    },
    // 客户级别重置
    handleLevelReset() {
      this.currentNewLevel = null;
      this.requestParams.newCustomerLevel = "";
      this.currentOriginalLevel = null;
      this.requestParams.initCustomerLevel = "";
    },
    // 新增客户
    goAdd() {
      this.$router.push({
        path: "/customManageAdd"
      });
    },
    // 详情
    goDetail(data) {
      this.$router.push({
        path: "/customManageDetail",
        query: { billId: data.billId }
      });
    }
  }
};
</script>
<style lang="less" scoped>
body {
  background: #f3f3f3;
}
.search_content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
.searchbox {
  padding: 15px;
  .level {
    margin-top: 2px;
  }
  .title {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    padding-top: 10px;
  }
  .insureList {
    display: flex;
    justify-content: space-between;
    // align-items: center;
    // flex-wrap: wrap;
    .insure_item {
      border: 1px solid #999;
      text-align: center;
      padding: 7px 10px 10px;
      // width: 10%;
      box-sizing: border-box;
      // margin-right: 5px;
      font-size: 13px;
      border-radius: 3px;
      color: #666;
      // margin-bottom: 10px;
      // margin-right: 5%;
      &:nth-child(3n) {
        margin-right: 0;
      }
      &.active {
        border: 1px solid #f65e07;
        color: #f65e07;
      }
    }
  }
  .insureBtn {
    display: flex;
    justify-content: right;
    margin-top: 20px;
    .resetBtn {
      padding: 0 20px;
      margin-right: 10px;
    }
    .confirmBtn {
      padding: 0 20px;
    }
  }
}
.list-container {
  padding-top: 148px;
  margin: 10px;
  overflow: hidden;
  .item {
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 15px;
    color: #101010;
    font-size: 14px;
    // width: 100%;
    .title {
      display: flex;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px solid #f4f4f4;
      font-size: 15px;
      img {
        margin-left: 5px;
      }
    }
    .row {
      margin-top: 10px;
    }
  }
}
.addBtn {
  position: fixed;
  bottom: 40px;
  width: 100%;
  z-index: 1;
  .footerBtn {
    width: 125px;
    margin: auto;
    text-align: center;
    font-size: 14px;
    padding: 10px 0rem;
    border-radius: 50px;
  }
  .orderItem_filebox {
    margin: auto;
    background: #409eff;
    color: #fff;
  }
}
.noContent {
  margin-top: 100px;
}
</style>
